<template>
  <!-- 近七日商品销售排名 -->
  <div class="content">
    <!-- <div id="SalesRankingId" class="SalesRankingcontent" /> -->
    <div class="swiper">
      <el-carousel
        :interval="3000"
        direction="vertical"
        indicator-position="none"
        :loop="true"
        :autoplay="true"
      >
        <el-carousel-item v-for="(item, index) in list" :key="index">
          <div
            class="swiperSlideItem"
            v-for="(items, indexs) in item"
            :key="item.num"
          >
            <div
              :class="'color' + indexs"
              style="font-size: 0.0417rem; text-align: left; display: flex"
            >
              <span style="margin-right: 0.0781rem"> NO.{{ items.num }}</span>
              <span>{{ items.name }}</span>
              <span style="margin-left: auto; margin-right: 0.026rem">{{
                items.value
              }}</span>
            </div>
            <div
              class="borderradius"
              v-if="items.value"
              :class="'corderColor' + indexs"
            >
              <el-progress
                :show-text="false"
                :percentage="items.value > 100 ? 95 : items.value"
                :color="customColor[indexs]"
              ></el-progress>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <!-- 
        <div class="swiper-slide" v-for="(item, index) in list" :key="index">
          <div
            class="swiperSlideItem"
            v-for="(items, indexs) in item"
            :key="item.num"
          >
            <div
              :class="'color' + indexs"
              style="font-size: 0.0417rem; text-align: left; display: flex"
            >
              <span style="margin-right: 0.0781rem"> NO.{{ items.num }}</span>
              <span>{{ items.name }}</span>
              <span style="margin-left: auto; margin-right: 0.026rem">{{
                items.value
              }}</span>
            </div>
            <div v-if="items.value" :class="'corderColor' + indexs">
              <el-progress
                :show-text="false"
                :percentage="items.value > 100 ? 95 : items.value"
                :color="customColor[indexs]"
              ></el-progress>
            </div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
// 引入js
// import Swiper from "swiper";
// // 引入css
// import "swiper/css/swiper.min.css";
import { getSevenDayGoods } from "@/api/user";
export default {
  name: "SalesRanking",
  data() {
    return {
      colorList: [
        ["#00E8FF", "#429DFF"],
        ["#E1F24C", "#8AEC6A"],
        ["#2BF3E4", "#04DFCF"],
        ["#00E8FF", "#429DFF"],
        ["#E1F24C", "#8AEC6A"],
        ["#2BF3E4", "#04DFCF"],
      ],
      sumNumber: null,
      list: [],
      customColor: [
        "#E5EA5F",
        "#7FFFD9",
        "#3CF24B",
        "#2471FE",
        "#2471FE",
        "#2471FE",
      ],
    };
  },
  mounted() {
    this.getSevenDayGoods();
    // this.initEcahstr();
    // this.$nextTick(() => {
    // var mySwiper = new Swiper(".swiper", {
    //   direction: "vertical", // 垂直切换选项
    //   loop: true, // 循环模式选项
    //   autoplay: true,
    //   autoplay: {
    //     delay: 1000, //1秒切换一次
    //   },
    // });
    // });
  },
  beforeDestroy() {},
  methods: {
    async getSevenDayGoods() {
      const res = await getSevenDayGoods();
      if (res.code === 200) {
        console.log(res.data, "近七日商品销售排名");
        const newArr = [];
        res.data.list.forEach((item, index) => {
          newArr.push({
            name: item.name,
            value: item.salesVolume,
            num: index + 1,
          });
        });
        newArr.forEach((items) => {
          if (items.name.length > 10)
            items.name = items.name.substring(0, 10) + "...";
        });
        this.list = this.chunk(newArr, 6);
        console.log(this.list, "近七日商品销售排名");
      }
    },
    chunk(array, size) {
      //获取数组的长度，如果你传入的不是数组，那么获取到的就是undefined
      const length = array.length;
      //判断不是数组，或者size没有设置，size小于1，就返回空数组
      if (!length || !size || size < 1) {
        return [];
      }
      //核心部分
      let index = 0; //用来表示切割元素的范围start
      let resIndex = 0; //用来递增表示输出数组的下标

      //根据length和size算出输出数组的长度，并且创建它。
      let result = new Array(Math.ceil(length / size));
      //进行循环
      while (index < length) {
        //循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
        result[resIndex++] = array.slice(index, (index += size));
      }
      //输出新数组
      return result;
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-progress {
  .el-progress-bar__outer {
    background-color: #01043f;
  }
}
.color0 {
  color: rgba(231, 234, 94, 1);
}
.borderradius {
  border-radius: 3px;
}
.corderColor0 {
  border: 1px solid #90950d;
  /* background-color: #90950d; */
}
.color1 {
  color: rgba(127, 255, 217, 1);
}
.corderColor1 {
  border: 1px solid #019267;
}
.color2 {
  color: rgba(36, 113, 254, 1);
}
.corderColor2 {
  border: 1px solid #077d11;
}
.color3 {
  color: rgba(255, 255, 255, 1);
}
.corderColor3 {
  border: 1px solid #0141b7;
}
.color4 {
  color: rgba(255, 255, 255, 1);
}
.corderColor4 {
  border: 1px solid #0141b7;
}
.color5 {
  color: rgba(255, 255, 255, 1);
}
.corderColor5 {
  border: 1px solid #0141b7;
}
.content {
  overflow: hidden;
  width: 1.3359rem;
  height: 1.1745rem;
  padding: 0.1797rem 0 0.1016rem 0.1198rem;
}
.swiper {
  /* box-sizing: border-box; */
  overflow: hidden;
  width: 100%;
  height: 100%;
  /* padding: 0.1797rem 0.2188rem 0.1016rem 0.1198rem; */
}
.swiper-slide {
  text-align: center;
  overflow: hidden;
}
.swiperSlideItem {
  width: 1.0807rem;
  height: 0.1536rem;
}
</style>
